<template>
  <div class="fx3-box">
    <ul>
      <li v-for="(msg, i) in search" :key="i">
        <img :src="msg.img" />
        <p>{{ msg.p1 }}</p>
        <p>{{ msg.p2 }}</p>
        <img :src="msg.img2" />
        <span>{{ msg.span2 }}</span>
        <span>{{ msg.span3 }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import link from "@/apis/link.js";

export default {
  mounted() {
    link("/data/search").then((ok) => {
      console.log(ok);
      this.search=ok.data.search
    });
  },
  data() {
    return {
      search:{},    
    };
  },
};
</script>

<style scoped>
.fx3-box {
  width: 100%;
  height: 10rem;
}
.fx3-box ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.fx3-box ul li {
  width: 45%;
  height: 3.07rem;
}
.fx3-box ul li img:nth-of-type(1) {
  width: 100%;
  height: 1.85rem;
}
.fx3-box ul li p:nth-of-type(1) {
  font-size: 0.12rem;
  background-color: #f2f2f2;
  border-radius: 0.92rem;
  text-align: center;
  margin-left: 0.08rem;
}
.fx3-box ul li p:nth-of-type(2) {
  font-size: 0.14rem;
  margin-left: 0.08rem;
}
.fx3-box ul li img:nth-of-type(2) {
  width: 0.22rem;
  height: 0.22rem;
  margin-left: 00.08rem;
  margin-top: 0.05rem;
  display: inline;
}
.fx3-box ul li span:nth-of-type(1) {
  font-size: 0.12rem;
  color: #b1b1b1;
  margin-left: 00.05rem;
}
.fx3-box ul li span:nth-of-type(2) {
  font-size: 0.08rem;
  color: #b1b1b1;
  margin-left: 0.5rem;
}
</style>